<template>
  <div>
    <div class="header">
      <span>
        <label for="label_1">姓名: </label>
        <el-input
          v-model="search_name"
          placeholder="请输入内容"
          style="width: 200px"
          clearable
          id="label_1"
        ></el-input>
      </span>
      <span style="margin-left: 15px">
        <label for="label_2">联系方式: </label>
        <el-input
          v-model="search_phone"
          placeholder="请输入内容"
          style="width: 200px; height: 40px"
          clearable
          id="label_2"
        ></el-input>
      </span>
      <span style="margin-left: 15px">
        时间区间:
        <DatePicker
          type="daterange"
          v-model="search_during_time"
          placeholder="选择时间"
          size="large"
          style="width: 250px"
        ></DatePicker>
      </span>
      <span>
        <el-button type="primary" @click="handelSearch" icon="el-icon-search"
          >查询</el-button
        >
      </span>
      <span
        ><el-button type="primary" @click="handleAddCustomer"
          >新增</el-button
        ></span
      >
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :row-style="{ height: '32px' }"
        :header-row-style="{ height: '10px' }"
        :cell-style="{ padding: '1px' }"
      >
        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
        <el-table-column prop="age" label="年龄" width="80"></el-table-column>
        <el-table-column prop="addr" label="家庭住址"></el-table-column>
        <el-table-column
          prop="hobby"
          label="爱好"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="联系方式"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="come"
          label="客户来源"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="next_visit_at"
          label="下次访问时间"
          :formatter="handleDateFormatter"
        ></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <i
              class="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
            ></i>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <i
              class="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          layout="total, prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 存放新增组件 -->
    <div v-show="showAdd">
      <AddCustomer ref="addcustomer"></AddCustomer>
    </div>
    <!-- 存放编辑组件 -->
    <div v-show="showEdit">
      <EditCustomer ref="editcustomer"></EditCustomer>
    </div>
  </div>
</template>

<script>
import AddCustomer from "./AddCustomer";
import EditCustomer from "./EditCustomer";
import { dateFormat } from "@/utils/time.js";

export default {
  name: "CustomerList",
  data() {
    return {
      search_name: "",
      search_phone: "",
      search_during_time: [],
      tableData: [],
      currentPage: 1, // 默认 1
      total: 0,
      showAdd: false,
      showEdit: false,
    };
  },
  methods: {
    handleEdit(index, row) {
      this.showEdit = true;
      this.$refs.editcustomer.handleOpen(row);
    },
    handleDateFormatter(row, column) {
      return dateFormat(row.next_visit_at);
    },
    // 执行删除
    handleDelete(index, row) {
      // console.log(index, row.id);
      this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let uid = this.COOKIE.get("uid");
        this.AXIOS.post(`/mycrmapi/customer/del/${uid}/${row.id}`)
          .then((res) => {
            // console.log(res.data.status);
            if (res.data.status === 1) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              // 刷新
              this.handleInitCustomerListData();
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
              });
            }
          })
          .then((err) => {
            console.log(err);
          });
      });
    },
    // 查询
    handelSearch() {
      let starttime =
        this.search_during_time[0] === ""
          ? ""
          : parseInt(new Date(this.search_during_time[0]).getTime() / 1000); // 开始时间戳, 毫秒
      let endtime =
        this.search_during_time[1] === ""
          ? ""
          : parseInt(new Date(this.search_during_time[1]).getTime() / 1000); // 结束时间戳, 毫秒
      let searchCondition = {
        search_name: this.search_name,
        search_phone: this.search_phone,
        search_starttime: starttime,
        search_endtime: endtime,
      };
      // console.log(searchCondition);
      this.handleInitCustomerListData(1, searchCondition);
    },
    // 分页
    handleCurrentChange(curPage) {
      this.handleInitCustomerListData(curPage);
    },
    // 添加用户界面
    handleAddCustomer() {
      this.showAdd = true;
      this.$refs.addcustomer.handleOpen(); // 调用子组件中的 open() 方法
      // 清空选项中的内容
    },
    // 加载数据
    handleInitCustomerListData(curPage = 1, params = {}) {
      // console.log(curPage);
      params["uid"] = this.COOKIE.get("uid");
      // console.log(params)
      this.AXIOS.get(`/mycrmapi/customer/list?cur_page=${curPage}`, {
        params: params,
      })
        .then((res) => {
          // console.log(res.data)
          this.tableData = res.data.data;
          this.total = res.data.total;
        })
        .catch((err) => {
          console.error(err);
          this.$message({ type: "error", message: err });
        });
    },
  },
  components: {
    AddCustomer,
    EditCustomer,
  },

  // 加载页面数据
  mounted() {
    this.handleInitCustomerListData();
  },
};
</script>

<style scoped>
.header {
  text-align: left;
  /* font-weight: bold; */
}

.content {
  margin-top: 40px;
}

.footer {
  position: fixed;
  bottom: 15px;
  left: 200px;
}
</style>
